---
import Layout from '../../../layouts/Layout.astro';
import ProductCard from '../../../components/ProductCard.astro';
import { getProductsFromDB, getBrandBySlugFromDB, getModelsByBrand } from '../../../lib/products';
import { getBrandContent } from '../../../data/brand-content';

const { slug } = Astro.params;
const dbBrand = await getBrandBySlugFromDB(slug!);
const brandName = dbBrand?.name || slug!.charAt(0).toUpperCase() + slug!.slice(1);
const logoSrc = dbBrand?.logo_url || null;
const brandSneakers = await getProductsFromDB({ limit: 24, brand: slug! });
const models = await getModelsByBrand(slug!);
const content = getBrandContent(slug!);

const title = content?.metaTitle || `${brandName} Sneakers — SneakerPicks`;
const description = content?.metaDescription || `Vergelijk ${brandName} sneaker prijzen. Bekijk alle modellen en vind de laagste prijs.`;

const analyticsItems = brandSneakers.map((s, i) => ({
  item_id: s.id, item_name: `${s.brand} ${s.name}`, item_brand: s.brand, price: s.lowestPrice, index: i
}));
const listId = `brand_${slug}`;
const listName = `${brandName} Sneakers`;
---

<Layout title={title} description={description}>
  <!-- Hero -->
  <section class="relative overflow-hidden">
    <div class="absolute inset-0 bg-gradient-to-b from-accent/5 via-transparent to-transparent"></div>
    <div class="relative mx-auto max-w-7xl px-4 py-16 sm:px-6">
      <div class="flex items-center gap-6">
        {logoSrc ? (
          <img src={logoSrc} alt={brandName} class="brand-logo h-12 w-auto max-w-[120px] object-contain" />
        ) : (
          <span class="text-5xl font-black text-accent">{brandName.charAt(0)}</span>
        )}
        <div>
          <h1 class="text-4xl font-black tracking-tight sm:text-5xl">{brandName} Sneakers</h1>
          <p class="mt-1 text-text-secondary">{brandSneakers.length} sneakers beschikbaar · Prijzen vergelijken</p>
        </div>
      </div>

      {content && (
        <p class="mt-4 text-lg italic text-accent">{content.tagline}</p>
      )}
    </div>
  </section>


  <!-- Popular Models -->
  {models.length > 0 && (
    <section class="mx-auto max-w-7xl px-4 py-8 sm:px-6">
      <h2 class="mb-4 text-sm font-bold uppercase tracking-widest text-text-muted">Populaire {brandName} modellen</h2>
      <div class="flex flex-wrap gap-3">
        {models.slice(0, 20).map(m => (
          <a href={`/merken/${slug}/${m.slug}`}
             class="rounded-full border border-border/50 bg-bg-card px-4 py-2 text-sm font-semibold text-text-secondary hover:border-accent/40 hover:text-accent transition-colors">
            {m.name} <span class="text-text-muted ml-1">({m.count})</span>
          </a>
        ))}
      </div>
    </section>
  )}

  <!-- Products -->
  <section class="mx-auto max-w-7xl px-4 py-8 sm:px-6">
    <h2 class="mb-6 text-sm font-bold uppercase tracking-widest text-text-muted">Alle {brandName} sneakers</h2>
    <div class="grid grid-cols-2 gap-4 sm:gap-6 md:grid-cols-3 lg:grid-cols-4">
      {brandSneakers.map((sneaker, i) => (
        <ProductCard sneaker={sneaker} index={i} />
      ))}
    </div>

    {brandSneakers.length === 0 && (
      <div class="py-20 text-center">
        <p class="text-lg text-text-muted">Nog geen sneakers gevonden voor {brandName}.</p>
      </div>
    )}
  </section>

  <!-- SEO Content -->
  {content && (
    <section class="mx-auto max-w-7xl px-4 py-16 sm:px-6">
      <div class="mx-auto max-w-3xl">
        <h2 class="mb-6 text-2xl font-black tracking-tight">Over {brandName}</h2>

        <div class="space-y-4 text-text-secondary leading-relaxed">
          {content.description.split('\n\n').map(paragraph => (
            <p>{paragraph}</p>
          ))}
        </div>

        <div class="mt-8 grid grid-cols-2 gap-4 sm:grid-cols-3">
          <div class="rounded-2xl border border-border/50 bg-bg-card p-4">
            <p class="text-xs font-bold uppercase tracking-widest text-text-muted">Opgericht</p>
            <p class="mt-1 text-lg font-black text-text">{content.founded}</p>
          </div>
          <div class="rounded-2xl border border-border/50 bg-bg-card p-4">
            <p class="text-xs font-bold uppercase tracking-widest text-text-muted">Oorsprong</p>
            <p class="mt-1 text-lg font-black text-text">{content.origin}</p>
          </div>
          <div class="col-span-2 rounded-2xl border border-border/50 bg-bg-card p-4 sm:col-span-1">
            <p class="text-xs font-bold uppercase tracking-widest text-text-muted">Sneakers</p>
            <p class="mt-1 text-lg font-black text-text">{brandSneakers.length} modellen</p>
          </div>
        </div>

        <div class="mt-8">
          <h3 class="mb-4 text-sm font-bold uppercase tracking-widest text-text-muted">Populaire {brandName} modellen</h3>
          <div class="flex flex-wrap gap-2">
            {content.popularModels.map(model => (
              <span class="rounded-full border border-border/50 bg-bg-card px-4 py-2 text-sm font-semibold text-text-secondary">
                {model}
              </span>
            ))}
          </div>
        </div>
      </div>
    </section>
  )}

  <script is:inline define:vars={{ analyticsItems, listId, listName }}>
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({ ecommerce: null });
    window.dataLayer.push({
      event: 'view_item_list',
      ecommerce: {
        item_list_id: listId,
        item_list_name: listName,
        items: analyticsItems.map(function(item) {
          return Object.assign({}, item, { item_list_id: listId, item_list_name: listName });
        })
      }
    });
  </script>
</Layout>

<style>
  .brand-logo {
    filter: brightness(0);
    transition: filter 0.3s ease;
  }
  :global(.dark) .brand-logo {
    filter: brightness(0) invert(1);
  }
</style>